<template>
  <div>
      <el-card>
            <el-form ref="form" :model="formData" label-width="80px">
  <el-form-item label="信息类别">
    <el-select v-model="formData.categoryId" placeholder="请选择" class="type-input">
      <el-option :label="item.category_name" :value="item.id" v-for="item in cateList" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="新闻标题">
    <el-input v-model="formData.title"></el-input>
  </el-form-item>
  <el-form-item label="图片">
    <UploadImg :action="actionUrl"></UploadImg>
  </el-form-item>
   <el-form-item label="发布日期">
       <el-date-picker
      v-model="formData.createDate"
      type="date"
      placeholder="选择日期"
      :disabled="true">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="信息内容">
       <quillEditor v-model="formData.content" />
  </el-form-item>
  <el-form-item>
       <el-button type="primary" @click="submitFrom" :loading="loading">保存</el-button>
  </el-form-item>
      </el-form>
      </el-card>
  </div>
</template>

<script>
import { computed, onMounted, reactive, ref, onActivated } from '@vue/composition-api'
import { getInfoList, editInfo } from '@/api/info.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import UploadImg from '@/components/UploadImg/index.vue'
export default {
  props: {
    //   空对象与props:['id']效果相同
    id: {}
  },
  components: {
    quillEditor,
    UploadImg
  },
  setup (props, { root }) {
    // 上传组件参数
    const actionUrl = ref('http://up-z2.qiniup.com')
    // 信息分类
    const cateList = computed(() => root.$store.state.infoCate.cateList)
    const getCate = () => {
      if (!root.$store.state.infoCate.cateList.length) {
        root.$store.dispatch('infoCate/getCateList')
      }
    }
    // 表单数据与提交
    const loading = ref(false)
    const formData = reactive({
      id: props.id,
      categoryId: '',
      title: '',
      content: '',
      imgUrl: '',
      createDate: null
    })
    const getInfoDetail = async () => {
      const { data: res } = await getInfoList({
        id: props.id,
        pageNumber: 1,
        pageSize: 1
      })
      formData.title = res.data.data[0].title
      formData.createDate = new Date(res.data.data[0].createDate * 1000)
      formData.categoryId = res.data.data[0].categoryId
      formData.content = res.data.data[0].content
    }
    // 提交表单
    const submitFrom = async () => {
      loading.value = true
      const requestParams = {
        ...formData
      }
      delete requestParams.createDate
      //   console.log(requestParams)
      const { data: res } = await editInfo(requestParams)
      root.$message({
        type: 'success',
        message: res.message
      })
      loading.value = false
    }
    // 生命周期
    onMounted(() => {
      getCate()
    })
    onActivated(() => {
      getInfoDetail()
    })
    return {
      actionUrl,
      cateList,
      formData,
      submitFrom,
      loading
    }
  }
}
</script>

<style>

</style>
